//移动端通用样式  1rem 相当于100px算的  也就是  宽度 / 7.5的比例
@function px75rem($px){
	$rem : 100px;
	@return ($px * 1px / $rem) + rem;
}

// 多少行限制超出省略
@mixin lineclamp($height, $count, $isrem: false) {
	@if($isrem == false) {
		height: px75rem($height);
		line-height: px75rem($height / $count);
	} @else {
		height: $height;
		line-height: $height / $count;
	}
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp: $count;
	word-wrap: break-word;
}

@mixin textoneline ($height: auto) {
	height: $height;
	@if($height == auto) {
		line-height: initial;
	} else {
		line-height:$height;
	}
	@include ellipsis();
}


@mixin colortext-l ($color1, $color2) {
	position: relative;
	@include background(linear-gradient(to bottom right, $color1, $color2));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

// 计算属性
@mixin ccalc($pro, $all, $reduce) {
	#{$pro}: calc(#{$all} - #{$reduce});
}

// footer  header  content充满body
@mixin fixfooter($headerH, $footerH) {
	body,html{
		min-height: unset!important;
		height: 100%!important;
	}
	.custom_header{
		height: $headerH;
		@include box-sizing(border-box);
		position: relative;
	}
	.custom_footer{
		height: $footerH;
		@include box-sizing(border-box);
		position: relative;
	}
	.custom_content{
		position: relative;
		background-color: #f0f0f0;
		min-height: calc(100% - #{$headerH} - #{$footerH});
	}
}

@mixin fixfooterflex () {
	html{
   		height: 100%;
	}

	body{
	    display: flex;
	    flex-direction: column;
	    min-height: 100%;
	    // font-family: "Hiragino Sans GB","Century Gothic",system, Arial, Verdana, Tahoma,"微软雅黑";
	    font-family: $font;
	    position: relative;
	    width: 100%;
	    overflow-x: hidden;
	}

	header{
		/* 我们希望 header 采用固定的高度，只占用必须的空间 */
		/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
		flex: 0 0 auto;
	}

	.main_content{
		/* 将 flex-grow 设置为1，该元素会占用所有的可使用空间
		而其他元素该属性值为0，因此不会得到多余的空间*/
		/* 1 flex-grow, 0 flex-shrink, auto flex-basis */
		flex: 1 1 auto;
		background-color: $color_bg;
		position:relative;
	}

	footer{
		/* 和 header 一样，footer 也采用固定高度*/
		/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
		flex: 0 0 auto;
	}
}

@mixin colorplaceholder($color) {
	::-webkit-input-placeholder { /* WebKit browsers */  
    	color: $color;  
	}  
	:-moz-placeholder { /* Mozilla Firefox 4 to 18 */  
	   color: $color;  
	   opacity: 1;  
	}  
	::-moz-placeholder { /* Mozilla Firefox 19+ */  
	   color: $color;  
	   opacity: 1;  
	}  
	:-ms-input-placeholder { /* Internet Explorer 10+ */  
	   color: $color;  
	}
}

// 字体文字颜色的mixin
@mixin colortext($color, $name) {
	.color-#{$name}{
		color: $color;
	}
}

// hr 线条和颜色
@mixin hr($color, $name) {
	.hr-#{$name}{
		width: 100%;
		height: 1px;
		background: $color;
		font-size: 0;
		margin: 0 auto;
	}
	@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
		@include translate(0, 1 / 2 * 100'px');
	}
	@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
		@include translate(0, 1 / 2 * 100'px');
	}
}

// fixed布局铺面全屏
@mixin fixedfull() {
	position: fixed;
	height: 100%;
	width:100%;
	right: 0;
	top: 0;
	left: 0;
	bottom: 0;
}

// 不同背景图片使用不同的尺寸
@mixin bgimage($url, $type: png, $hasmedia: false){
   	@if($hasmedia == true){
   		@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
			background-image: url($url + "@2x." + $type)
   		}
   		@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
			background-image: url($url + "@3x." + $type)
   		}
   	}
   	background-image: url($url + "." + $type)
}

